<script lang="ts" setup>
import type { AiPromptTemplatesApi } from '#/api/ai/prompt/promptTemplates';

import { defineProps, watch } from 'vue';

import { useVbenForm } from '#/adapter/form';

import { useContentFormSchema } from '../data';

const props = defineProps<{
  formData: AiPromptTemplatesApi.PromptTemplates;
}>();
const [ContentForm, contentFormApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 80,
  },
  wrapperClass: 'grid-cols-1',
  layout: 'vertical',
  schema: useContentFormSchema(),
  showDefaultActions: false,
});
/** 动态更新表单值 */
watch(
  () => props.formData,
  (val: any) => {
    if (!val) {
      return;
    }
    contentFormApi.setValues(val);
  },
  { immediate: true },
);

/** 暴露出表单校验方法和表单值获取方法 */
defineExpose({
  validate: async () => {
    const { valid } = await contentFormApi.validate();
    return valid;
  },
  getValues: contentFormApi.getValues,
});
</script>

<template>
  <div>
    <ContentForm />
    <a-card>
      <div>提示词编写技巧</div>
      <div>1. 使用明确的指令和清晰的格式，避免模糊的表述</div>
      <div>2. 指定AI应该扮演的角色或采用的语气，赋予AI明确的身份</div>
      <div>3. 使用方括号 [变量] 标注用户需要替换的部分</div>
      <div>4. 提供输出的格式和结构要求，使结果更加规范</div>
      <div>5. 添加示例可以帮助AI更好地理解你的意图</div>
    </a-card>
  </div>
</template>
